import { Button, Input, message, Modal } from "antd";
import { useEffect, useState } from "react";
import TextArea from "antd/es/input/TextArea";
import RequestUtils from "../../../utils/requestUtils";
import RequestApis from "../../../apis/requestApis";
import { EditOutlined } from "@ant-design/icons";
import { Typography } from "antd";

const { Title } = Typography;

/**
 * 定时任务编辑模态框组件
 * @param props
 * @returns {JSX.Element}
 */
const TaskEdit = (props) => {
    const {
        visible,
        setVisible,
        taskDetail,
        searchScheduledTaskById
    } = props;

    const [messageApi, contextHolder] = message.useMessage();

    // 编辑定时任务请求参数
    const [editTaskReq, setEditTaskReq] = useState({
        // 任务id
        taskId: '',
        // 任务名
        taskName: '',
        // 任务描述
        taskDescription: '',
        // 服务名
        serviceName: '',
        // 接口地址
        uri: '',
        // cron表达式
        cronExpression: '',
    });

    /**
     * 根据id编辑定时任务信息
     */
    const editScheduledTaskById = () => {
        RequestUtils.post(RequestApis.taskManage.editById, {
            ...editTaskReq,
            id: editTaskReq.taskId
        }).then(res => {
            searchScheduledTaskById();
            messageApi.success('编辑定时任务成功');
            setVisible(false);
        }).catch(err => messageApi.error(err.message));
    }

    /**
     * 模态框状态改变时为其赋值
     * 处理taskDetail可能为undefined的边界情况
     */
    useEffect(() => {
        if (visible && taskDetail) {
            setEditTaskReq({
                taskId: taskDetail.id || '',
                taskName: taskDetail.taskName || '',
                taskDescription: taskDetail.taskDescription || '',
                serviceName: taskDetail.serviceName || '',
                uri: taskDetail.uri || '',
                cronExpression: taskDetail.cronExpression || '',
            });
        } else if (!visible) {
            // 关闭时清空表单
            setEditTaskReq({
                taskId: '',
                taskName: '',
                taskDescription: '',
                serviceName: '',
                uri: '',
                cronExpression: '',
            });
        }
    }, [visible, taskDetail]);

    return (
        <Modal
            open={visible}
            title={
                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                    <EditOutlined style={{ color: "#1890ff", fontSize: "18px" }} />
                    <Title level={4} style={{ margin: 0 }}>编辑定时任务</Title>
                </div>
            }
            onCancel={() => setVisible(false)}
            width={860}
            footer={[
                <Button
                    key="submit"
                    type="primary"
                    onClick={() => editScheduledTaskById()}
                    style={{
                        padding: "6px 24px",
                        fontSize: "14px",
                        borderRadius: "4px",
                        transition: "all 0.2s ease",
                    }}
                    hoverStyle={{
                        opacity: 0.9,
                        transform: "translateY(-1px)",
                    }}
                >
                    保存
                </Button>,
                <Button
                    key="cancel"
                    danger
                    style={{
                        marginLeft: "12px",
                        padding: "6px 24px",
                        fontSize: "14px",
                        borderRadius: "4px",
                        transition: "all 0.2s ease",
                    }}
                    onClick={() => setVisible(false)}
                    hoverStyle={{
                        opacity: 0.9,
                        transform: "translateY(-1px)",
                    }}
                >
                    取消
                </Button>,
            ]}
            bodyStyle={{
                padding: "24px",
                backgroundColor: "#fafafa",
                borderRadius: "8px 8px 0 0",
            }}
            style={{
                borderRadius: "8px",
                overflow: "hidden",
            }}
        >
            {/* 外层容器统一字体大小 */}
            <div style={{ fontSize: "14px" }}>
                {contextHolder}

                {/* 第一行：任务名 + 服务名（两列布局） */}
                <div style={{ display: "flex", gap: "24px", marginBottom: "24px" }}>
                    {/* 任务名 */}
                    <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "8px" }}>
                        <div style={{
                            display: "flex",
                            alignItems: "center",
                            color: "#1f2329",
                            fontWeight: 500,
                            lineHeight: "1.5",
                        }}>
                            任务名
                            <span style={{ color: "#ff4d4f", marginLeft: "4px" }}>*</span>
                        </div>
                        <Input
                            value={editTaskReq.taskName}
                            onChange={(e) => {
                                setEditTaskReq({ ...editTaskReq, taskName: e.target.value });
                            }}
                            style={{
                                borderRadius: "4px",
                                border: "1px solid #dcdfe6",
                                height: "40px",
                                transition: "all 0.2s ease",
                            }}
                            placeholder="请输入定时任务的名称"
                            onFocus={(e) => {
                                e.currentTarget.style.borderColor = "#1890ff";
                                e.currentTarget.style.boxShadow = "0 0 0 2px rgba(24, 144, 255, 0.2)";
                            }}
                            onBlur={(e) => {
                                e.currentTarget.style.borderColor = "#dcdfe6";
                                e.currentTarget.style.boxShadow = "none";
                            }}
                        />
                    </div>

                    {/* 服务名 */}
                    <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "8px" }}>
                        <div style={{
                            display: "flex",
                            alignItems: "center",
                            color: "#1f2329",
                            fontWeight: 500,
                            lineHeight: "1.5",
                        }}>
                            服务名
                            <span style={{ color: "#ff4d4f", marginLeft: "4px" }}>*</span>
                        </div>
                        <Input
                            value={editTaskReq.serviceName}
                            onChange={(e) => {
                                setEditTaskReq({ ...editTaskReq, serviceName: e.target.value });
                            }}
                            style={{
                                borderRadius: "4px",
                                border: "1px solid #dcdfe6",
                                height: "40px",
                                transition: "all 0.2s ease",
                            }}
                            placeholder="请输入目标服务的名称"
                            onFocus={(e) => {
                                e.currentTarget.style.borderColor = "#1890ff";
                                e.currentTarget.style.boxShadow = "0 0 0 2px rgba(24, 144, 255, 0.2)";
                            }}
                            onBlur={(e) => {
                                e.currentTarget.style.borderColor = "#dcdfe6";
                                e.currentTarget.style.boxShadow = "none";
                            }}
                        />
                    </div>
                </div>

                {/* 第二行：接口地址（单独一行） */}
                <div style={{ marginBottom: "24px", display: "flex", flexDirection: "column", gap: "8px" }}>
                    <div style={{
                        display: "flex",
                        alignItems: "center",
                        color: "#1f2329",
                        fontWeight: 500,
                        lineHeight: "1.5",
                    }}>
                        接口地址
                        <span style={{ color: "#ff4d4f", marginLeft: "4px" }}>*</span>
                    </div>
                    <Input
                        value={editTaskReq.uri}
                        onChange={(e) => {
                            setEditTaskReq({ ...editTaskReq, uri: e.target.value });
                        }}
                        style={{
                            borderRadius: "4px",
                            border: "1px solid #dcdfe6",
                            height: "40px",
                            transition: "all 0.2s ease",
                        }}
                        placeholder="请输入接口地址（如：/api/task/exec）"
                        onFocus={(e) => {
                            e.currentTarget.style.borderColor = "#1890ff";
                            e.currentTarget.style.boxShadow = "0 0 0 2px rgba(24, 144, 255, 0.2)";
                        }}
                        onBlur={(e) => {
                            e.currentTarget.style.borderColor = "#dcdfe6";
                            e.currentTarget.style.boxShadow = "none";
                        }}
                    />
                </div>

                {/* 第三行：任务描述（单独一行，根据后端文档为必填项） */}
                <div style={{ marginBottom: "24px", display: "flex", flexDirection: "column", gap: "8px" }}>
                    <div style={{
                        display: "flex",
                        alignItems: "center",
                        color: "#1f2329",
                        fontWeight: 500,
                        lineHeight: "1.5",
                    }}>
                        任务描述
                        <span style={{ color: "#ff4d4f", marginLeft: "4px" }}>*</span>
                    </div>
                    <TextArea
                        rows={3}
                        value={editTaskReq.taskDescription}
                        onChange={(e) => {
                            setEditTaskReq({ ...editTaskReq, taskDescription: e.target.value });
                        }}
                        style={{
                            borderRadius: "4px",
                            border: "1px solid #dcdfe6",
                            transition: "all 0.2s ease",
                            resize: "vertical",
                        }}
                        placeholder="请简要描述任务的功能和用途"
                        onFocus={(e) => {
                            e.currentTarget.style.borderColor = "#1890ff";
                            e.currentTarget.style.boxShadow = "0 0 0 2px rgba(24, 144, 255, 0.2)";
                        }}
                        onBlur={(e) => {
                            e.currentTarget.style.borderColor = "#dcdfe6";
                            e.currentTarget.style.boxShadow = "none";
                        }}
                    />
                </div>

                {/* 第四行：Cron表达式（单独一行，带提示） */}
                <div style={{ marginBottom: "12px", display: "flex", flexDirection: "column", gap: "8px" }}>
                    <div style={{
                        display: "flex",
                        alignItems: "center",
                        color: "#1f2329",
                        fontWeight: 500,
                        lineHeight: "1.5",
                    }}>
                        Cron表达式
                        <span style={{ color: "#ff4d4f", marginLeft: "4px" }}>*</span>
                    </div>
                    <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
                        <Input
                            value={editTaskReq.cronExpression}
                            onChange={(e) => {
                                setEditTaskReq({ ...editTaskReq, cronExpression: e.target.value });
                            }}
                            style={{
                                borderRadius: "4px",
                                border: "1px solid #dcdfe6",
                                height: "40px",
                                transition: "all 0.2s ease",
                                fontFamily: "SFMono-Regular, Consolas, monospace",
                            }}
                            placeholder="请输入标准Cron表达式（如：0 0 1 * * ?）"
                            onFocus={(e) => {
                                e.currentTarget.style.borderColor = "#1890ff";
                                e.currentTarget.style.boxShadow = "0 0 0 2px rgba(24, 144, 255, 0.2)";
                            }}
                            onBlur={(e) => {
                                e.currentTarget.style.borderColor = "#dcdfe6";
                                e.currentTarget.style.boxShadow = "none";
                            }}
                        />
                        {/* Cron提示文字，保持风格一致 */}
                        <div style={{
                            fontSize: "12px",
                            color: "#666",
                            lineHeight: "1.4",
                            paddingLeft: "2px",
                        }}>
                            提示：支持5-7位标准Cron表达式，可使用在线Cron生成工具辅助编写
                        </div>
                    </div>
                </div>
            </div>
        </Modal>
    )
}

export default TaskEdit;